<template>
  <div>
    <div ref="container" class="qqq"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      divid: '',
    };
  },
  components: {

  },
  props: {
    LatLng: {
      type: String,
      default: '',
    },
  },
  created() {
  },
  mounted() {
    if (this.LatLng !== '') {
      this.initMap();
    }
  },
  beforeDestroy() {
  },
  methods: {
    initMap() {
      const result = [];
      for (let i = 0; i < 8; i += 1) {
        const ranNum = Math.ceil(Math.random() * 25);
        result.push(String.fromCharCode(65 + ranNum));
      }
      this.divid = result.join('');
      this.$refs.container.id = this.divid;
      // 定义地图中心点坐标
      this.$nextTick(() => {
        const a = this.LatLng.split(',');
        const center = new TMap.LatLng(a[0], a[1]);
        // 定义map变量，调用 TMap.Map() 构造函数创建地图
        const map = new TMap.Map(`${this.divid}`, {
          center, // 设置地图中心点坐标
          zoom: 17.2, // 设置地图缩放级别
          pitch: 43.5, // 设置俯仰角
          rotation: 45, // 设置地图旋转角度
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
#container{
  height: 200px;
  width: 100%;
}
</style>
